<template>
  <div class="tableModify">
    <table cellspacing="0">
      <thead>
        <th>序号</th>
        <th v-for="(item, index) in formColumn" :key="'th_' + index">
          {{ item.label }}
        </th>
        <th v-if="mode && mode.toLowerCase().includes('add')">
          <el-button
            type="success"
            icon="el-icon-plus"
            size="mini"
            plain
            @click="addRow()"
          ></el-button>
        </th>
      </thead>
      <tr v-for="(item, row_index) in dataTable" :key="'tr_' + row_index">
        <td style="width: 50px">{{ row_index + 1 }}</td>
        <td
          v-for="(column, column_index) in formColumn"
          :width="column.width || 120"
          :key="row_index + '_' + column_index"
        >
          <div
            v-if="
              column.handleGetVisible ? column.handleGetVisible(item) : true
            "
          >
            <!-- select 选择-->
            <el-select
              :disabled="isDisable(row_index, column_index)"
              v-if="column.type == 'select'"
              v-model="item[column.name]"
              clearable
              filterable
              :multiple="column.multiple || false"
              placeholder="请选择"
              @change="column.handleChange ? column.handleChange(item) : ''"
            >
              <el-option
                v-for="option in handlerGetOptions(column, item)"
                :key="row_index + '_' + column_index + '_' + '_' + option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
            <!-- select 选择-->
            <!-- 级联选择-->
            <!-- <el-select
              :disabled="isDisable(row_index, column_index)"
              v-if="column.type == 'select'"
              v-model="item[column.name]"
              clearable
              filterable
              :multiple="column.multiple || false"
              placeholder="请选择"
              @change="column.handleChange ? column.handleChange(item) : ''"
            >
              <el-option
                v-for="option in handlerGetOptions(column, item)"
                :key="row_index + '_' + column_index + '_' + '_' + option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select> -->
            <!-- 级联选择-->
            <!-- textarea 文本-->
            <el-input
              v-else-if="column.type == 'textarea'"
              :type="column.type"
              v-model="item[column.name]"
            ></el-input>
            <!-- textarea 文本-->
            <!-- 日期选择-->
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-else-if="column.type == 'date'"
              v-model="item[column.name]"
              :type="column.type"
              placeholder="选择日期"
            >
            </el-date-picker>
            <!-- 日期选择-->
            <!-- radio 单选-->
            <el-radio-group
              v-else-if="column.type == 'radio'"
              v-model="item[column.name]"
            >
              <el-radio
                v-for="option in column.options"
                :key="row_index + '_' + column_index + '_' + option.value"
                :label="option.value"
                >{{ option.label }}</el-radio
              >
            </el-radio-group>
            <!-- radio 单选-->
            <!--弹出框单选/字符-->
            <div v-else-if="column.type == 'chooseOrInput'">
              <el-input
                v-if="column.handleGetType(item) === 'input'"
                v-model="item[column.name]"
              ></el-input>
              <el-input
                v-else-if="column.handleGetType(item) === 'choose'"
                :ref="column.chooseName + '_' + row_index"
                v-model="item[column.chooseName]"
                placeholder="请选择"
                :readonly="true"
                class="input-with-select"
              >
                <el-button
                  slot="append"
                  @click="
                    column.handelClick(
                      column.name +
                        '_' +
                        column.chooseValue +
                        '_' +
                        column.chooseName +
                        '_' +
                        row_index,
                      item
                    )
                  "
                  >选择</el-button
                >
              </el-input>
            </div>
            <!-- 弹出框单选/字符-->
            <!--下拉框/字符-->
            <div v-else-if="column.type == 'selectOrInput'">
              <el-input
                v-if="column.handleGetType(item) === 'input'"
                v-model="item[column.name]"
              ></el-input>
              <el-select
                :disabled="isDisable(row_index, column_index)"
                v-if="column.handleGetType(item) == 'select'"
                v-model="item[column.name]"
                clearable
                filterable
                placeholder="请选择"
                @change="column.handleChange ? column.handleChange(item) : ''"
              >
                <el-option
                  v-for="option in column.options"
                  :key="row_index + '_' + column_index + '_' + option.value"
                  :label="option.label"
                  :value="option.value"
                ></el-option>
              </el-select>
            </div>
            <!--下拉框/字符-->
            <div v-else-if="column.type == 'buttons'">
              <znxd-button-list
                :buttons="column.buttons"
                :initData="item"
                :index="row_index"
              ></znxd-button-list>
            </div>
            <!-- label 输入框-->
            <div v-else-if="column.type == 'label'">
              {{ column.init ? column.init : item[column.name] }}
            </div>
            <!-- label 输入框-->
            <!-- input 输入框-->
            <el-input
              :disabled="isDisable(row_index, column_index)"
              v-else
              v-model="item[column.name]"
            ></el-input>
            <!-- input 输入框-->
          </div>
        </td>
        <td
          v-if="
            mode &&
            mode.toLowerCase().includes('delete') &&
            !(row_index == 0 || row_index == 1)
          "
          width="60"
        >
          <el-button
            type="danger"
            icon="el-icon-minus"
            size="mini"
            plain
            @click="dataTable.splice(row_index, 1)"
          ></el-button>
        </td>
        <td v-else width="60"></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataTable: []
    }
  },
  props: {
    /* formColumn 自定义表单项 支持  input、select、textarea、radio、view（component对象）、chooseOrInput、selectOrInput、buttons
    示例：
     this.formColumn = [
        {
          name: "datasourceName",
          label: "数据源名称",
          type: "input",
          options: [],
          width:"120px",
          handleGetVisible:function() //单列显示隐藏
          {
          }
        },
        {
          name: "datasource",
          label: "数据源类型",
          type: "select",
          options: this.typeOptions,
          multiple:true,
          getOptions:function getOptions(row) //获取动态下拉参数
          {
          }
        },
        {
          name: "comments",
          label: "数据源描述",
          type: "textarea"
        },
        {
          name: "jdbcUrl",
          label: "JDBC URL",
          type: "input"
        },
        {
          name: "jdbcUsername",
          label: "用户名",
          type: "input"
        },
        {
          name: "jdbcPassword",
          label: "密码",
          type: "input"
        },
        {
          name: "status",
          label: "是否启用",
          type: "radio",
          options: this.statusOptions
        },
        {
          name: "available",
          label: "测试",
          type: "view",
          template: dbLink
        },
        {
          name: "headerValue",
          label: "值",
          type: "choose",
          handleGetType: (row) => {
            return row.headKeyType === "TOKEN" ? "choose" : "input";
          },
          handelClick(id) {
            _this.handelChooseEvent(id);
          }
        }
      ];
    */
    formColumn: Array,
    initData: Array,
    mode: String,
    value: Array
  },
  watch: {
    dataTable: {
      deep: true,
      handler: function (val) {
        console.log("modify dataTable ", val)
        this.$emit("input", val)
      }
    },
    initData: {
      deep: true,
      handler: function (val) {
        // console.log("init listModify", val);
        this.dataTable = []
        if (val) {
          val.map((x) => {
            let obj = Object.assign({}, x)
            this.dataTable.push(obj)
          })
        }
      }
    }
  },
  methods: {
    isDisable (row_index, column_index) {
      if ((column_index == 0 || column_index == 6 || column_index == 7) && (row_index == 0 || row_index == 1)) {
        return true
      } else {
        return false
      }
    },
    // 常规选择框赋值  id string 字段_索引  val object name,value
    setValueById (id, val) {
      // console.log("val", val);
      let obj = id.split("_")
      // console.log("obj", obj);
      let index = obj[3]
      let row = this.dataTable[parseInt(index)]
      // console.log("this.dataTable", this.dataTable);
      // console.log("row", row);
      row[obj[1]] = val.value
      row[obj[2]] = val.name
      this.$set(this.dataTable, [parseInt(index)], row)
      // this.$set(this.dataTable[parseInt(obj[1])], obj[0] + "_value", val.value);
    },
    addRow () {
      this.dataTable.push({})
    },
    handlerGetOptions (column, item) {
      if (column.getOptions) {
        return column.getOptions(item)
      }
      return column.options
    }
  },
  mounted () {
    if (this.initData) {
      this.dataTable = [...this.initData]
    } else if (this.value) {
      // console.log(this.value);
      this.dataTable = [...this.value]
    }
  }
};
</script>
<style lang="scss" scoped>
.tableModify {
  table {
    width: 100%;

    > thead {
      background: #f1f4f6;
      border: 1px solid #ededed;
      line-height: 40px;
      > th {
        text-align: center;
      }
    }
    > tr {
      > td {
        line-height: 40px;
        text-align: center;
        > div {
          width: 100%;
          height: 100%;
          .el-select--medium {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
